H5移动端vue+vant实现图片单张/批量上传（超1M压缩处理）

2024-07-02 01:32| 来源: 网络整理| 查看: 265

这是一个很常见的需求，但是我在写代码的过程中发现一些坑，就想为大家（包括踩坑前的我）打开一扇大门，话不多说，上才艺。

html部分用到vant UI库的van-uploader

4、附件上传（最多上传9张）

js的data部分：

data() { return { fileList: [], }; },

分两种情况：

1、单张图片上传，注意此时传过来的file是对象，以下就是针对对象的处理方法

下面的代码可直接搬哈，只是把存图片地址的 fileList替换成自己的参数即可，具体就是先判断当前图片大小，如果>1M,就要压缩再上传：

// 图片上传后 onRead(file) { console.log("上传的file", file); // 大于1MB的jpeg和png图片都缩小像素上传 file.status = "uploading"; file.message = "上传中..."; // 如果是单张图片,fille是对象，当上传图片大于1M时，压缩上传 if (file.file) { if ( /\/(?:jpeg|png)/i.test(file.file.type) && file.file.size > 1000000 ) { console.log("大于1Mb"); // 创建Canvas对象(画布) let canvas = document.createElement("canvas"); // 获取对应的CanvasRenderingContext2D对象(画笔) let context = canvas.getContext("2d"); // 创建新的图片对象 let img = new Image(); // 指定图片的DataURL(图片的base64编码数据) img.src = file.content; // 监听浏览器加载图片完成，然后进行进行绘制 img.onload = () => { var newWidth = img.width * 0.7; //压缩后图片的宽度 var newHeight = img.height * 0.7; //压缩后图片的高度 // 指定canvas画布大小，该大小为最后生成图片的大小 canvas.width = newWidth; canvas.height = newHeight; /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/ context.drawImage(img, 0, 0, newWidth, newHeight); // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量 file.content = canvas.toDataURL(file.file.type, 0.7); let data = { dirtype: "hlfw", message: file.content, }; // 以下是请求 // this.$post("/uploadImg", data) // .then((res) => { // if (res.result == "success") { // file.uploadUrl = res.url; // this.$toast(res.info); // file.status = ""; // file.message = ""; // } else { // this.$toast(res.info); // file.status = "failed"; // file.message = "上传失败"; // if (!this.fileList[this.fileList.length - 1].uploadUrl) { // this.fileList.splice(this.fileList.length - 1, 1); // } // } // }) // .catch((err) => { // console.log(err); // this.$toast("上传超时请重试"); // file.status = "failed"; // file.message = "上传失败"; // if (!this.fileList[this.fileList.length - 1].uploadUrl) { // this.fileList.splice(this.fileList.length - 1, 1); // } // }); }; } else { let data = { dirtype: "hlfw", message: file.content,//这里可以这样传message 也可以直接传this.fileList.content(具体参数根据后端需求来写) }; console.log("jijik", data,this.fileList); // this.$post("/uploadImg", data) // .then((res) => { // console.log("从v", res); // if (res.result == "success") { // file.uploadUrl = res.url; // file.status = ""; // file.message = ""; // } else { // this.$toast(res.info); // file.status = "failed"; // file.message = "上传失败"; // if (!this.fileList[this.fileList.length - 1].uploadUrl) { // this.fileList.splice(this.fileList.length - 1, 1); // } // } // }) // .catch((err) => { // console.log(err); // console.log(this.fileList); // file.status = "failed"; // file.message = "上传失败"; // this.$toast("上传超时请重试"); // if (!this.fileList[this.fileList.length - 1].uploadUrl) { // this.fileList.splice(this.fileList.length - 1, 1); // } // }); } }else(){ // 这里是多条上传处理方式，根据自己需求搬 },

以上就是单条上传，接下来说说批量上传，以下方法适用于，后端要求接收参数为对象（数组就不要for循环上传了）这里就是上面else里面的内容拉，我拆分来写，各位各取所需

// 如果是批量，file就是数组 else { for (let i = 0; i < file.length; i++) { if ( /\/(?:jpeg|png)/i.test(file[i].file.type) && file[i].file.size > 1000000 ) { console.log("大于1Mb"); // 创建Canvas对象(画布) let canvas = document.createElement("canvas"); // 获取对应的CanvasRenderingContext2D对象(画笔) let context = canvas.getContext("2d"); // 创建新的图片对象 let img = new Image(); // 指定图片的DataURL(图片的base64编码数据) img.src = file[i].content; // 监听浏览器加载图片完成，然后进行进行绘制 img.onload = () => { var newWidth = img.width * 0.7; //压缩后图片的宽度 var newHeight = img.height * 0.7; //压缩后图片的高度 // 指定canvas画布大小，该大小为最后生成图片的大小 canvas.width = newWidth; canvas.height = newHeight; /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/ context.drawImage(img, 0, 0, newWidth, newHeight); // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量 file[i].content = canvas.toDataURL(file[i].file.type, 0.7); let data = { dirtype: "hlfw", message: file[i].content, }; // this.$post("/uploadImg", data) // .then((res) => { // if (res.result == "success") { // file.uploadUrl = res.url; // this.$toast(res.info); // file.status = ""; // file.message = ""; // } else { // this.$toast(res.info); // file.status = "failed"; // file.message = "上传失败"; // if (!this.fileList[this.fileList.length - 1].uploadUrl) { // this.fileList.splice(this.fileList.length - 1, 1); // } // } // }) // .catch((err) => { // console.log(err); // this.$toast("上传超时请重试"); // file.status = "failed"; // file.message = "上传失败"; // if (!this.fileList[this.fileList.length - 1].uploadUrl) { // this.fileList.splice(this.fileList.length - 1, 1); // } // }); }; } else { let data = { dirtype: "hlfw", message: this.fileList[i].content, }; console.log("上传参数", data,'图片参数',this.fileList[i]); this.$post("/uploadImg", data) .then((res) => { console.log("从v", res); if (res.result == "success") { file[i].uploadUrl = res.url; file[i].status = ""; file[i].message = ""; } else { this.$toast(res.info); file[i].status = "failed"; file[i].message = "上传失败"; if (!this.fileList[this.fileList.length - 1].uploadUrl) { this.fileList.splice(this.fileList.length - 1, 1); } } }) .catch((err) => { console.log(err); console.log(this.fileList); file[i].status = "failed"; [i].message = "上传失败"; this.$toast("上传超时请重试"); if (!this.fileList[this.fileList.length - 1].uploadUrl) { this.fileList.splice(this.fileList.length - 1, 1); } }); } } }

其实呢，跟单张大同小异，只是我们这里的file接收到的是个数组，所以采用for轮询发请求上传的方式（再说一次：这是后端不接收数组的方式哈，如果你打得赢他，让他接收数组，方便一点）

至此完结，早日暴富，脱离苦海

【本文地址】

公司简介

联系我们